<template>
    <div>
        <el-radio-group v-model="labelPosition" size="small">
            <el-radio-button label="left">左对齐</el-radio-button>
            <el-radio-button label="right">右对齐</el-radio-button>
            <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" status-icon :model="formLabelAlign" :rules="rules" ref="formLabelAlign" class="demo-ruleform">
            <el-form-item label="账号" prop="account">
                <el-input v-model="formLabelAlign.account" disabled></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="formLabelAlign.phone"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="username">
                <el-input v-model="formLabelAlign.username"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('formLabelAlign')">提交</el-button>
                <el-button @click="resetForm('formLabelAlign')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {updateEmployeeInfo} from '@/utils/modules/employee.js'
export default {
    props: ['phone', 'account', 'username'],
    data() {
        // 验证手机号
        var validateMobilePhone = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('负责人手机号不可为空'));
            } else {
                let reg = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/);
                if (!reg.test(value)) {
                    callback(new Error('请输入有效的手机号码'));
                    return;
                }
                callback();
            }
        }
        return {
            labelPosition: 'right',
            formLabelAlign: {
                username: '',
                phone: '',
                account: ''
            },
            rules:{
                username:[
                    { required :true , message:'请输入您的昵称',trigger:'blur'},
                    {min:3,max:20,message:'长度在3到20个字符',trigger:'blur'}
                ],
                phone:[
                    {validator:validateMobilePhone,trigger:'blur'}
                ],
                account:[
                    {required:false}
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    updateEmployeeInfo(this.formLabelAlign).then(res=>{
                        this.$message({
                            type:'success',
                            message:res.message,
                            showClose:true
                        })
                        setTimeout(()=>{
                            // 表单提交事件触发后自动触发父组件中的change
                            this.$emit('change',false)
                        },2000)
                    }).catch(err=>{
                        this.$message({
                            type:'error',
                            message:err.message,
                            showClose:true
                        })
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    watch: {
        phone: {
            handler: function (newVal) {
                this.formLabelAlign.phone = newVal
            },
            immediate: true,
            deep: true
        },
        account: {
            handler: function (newVal) {
                this.formLabelAlign.account = newVal
            },
            immediate: true,
            deep: true
        },
        username: {
            handler: function (newVal) {
                this.formLabelAlign.username = newVal
            },
            immediate: true,
            deep: true
        }
    }
}
</script>